import React, { useState } from 'react'
import { View, Text, Input, Image, Textarea, Span } from '@tarojs/components'
import PageWrapper from '@/components/PageWrapper'
import './index.scss';
import { navigateTo } from '@/utils/navigation'

interface NoBorderTableProps {
  headers: string[]         // 表头标题列表
  data: string[][]          // 每行是一个字符串数组
}
const Page = () => {
  const headers = ['品名', '昨日价', '今日价', '涨跌']
  const data = [
    ['24年飞天原箱', '2811', '2811', '28'],
    ['24年飞天原箱', '2511', '2511', '25'],
    ['24年飞天原箱', '3011', '3011', '30'],
    ['24年飞天原箱', '2211', '2211', '22'],
  ]
  return (
    <PageWrapper title="市场行情" showBack={true} backgroundColor='#F0F0F0'>
      <View className="my-service-page">
        <View className="my-service">
          <Image  src={require(`../../../assets/home/market-bg.png`)}/>
        </View>
        <View className="title-item-box">
          <View className="title-item">今日行情<Span>2025.03.08</Span></View>
          <View className="no-border-table">
            {/* 表头 */}
            <View className="table-header">
              {headers.map((header, index) => (
                <View key={index} className="cell header-cell"><Span>{header}</Span></View>
              ))}
            </View>

            {/* 表格内容 */}
            {data.map((row, rowIndex) => (
              <View key={rowIndex} className="table-row">
                {row.map((cell, cellIndex) => (
                  <Text key={cellIndex} className="cell">{cell}</Text>
                ))}
              </View>
            ))}
          </View>
        </View>
      </View>
    </PageWrapper>
  )
}

export default Page
